<template>
  <b-col>
    <b-card
      class="ma-3 d-flex flex-no-wrap justify-space-between align-center"
      b-for="item in artList"
      :key="item.id"
      link
      @click="$router.push(`article/detail/${item.ID}`)"
    >
      <b-avatar class="ma-3 hidden-sm-and-down" size="125" tile>
        <b-img :src="item.img"></b-img>
      </b-avatar>

      <b-col>
        <b-card-title>
          <b-chip color="pink" outlined label class="mr-3 white--text">
            {{
            item.Category.name
            }}
          </b-chip>
          <div>{{ item.title }}</div>
        </b-card-title>
        <b-card-subtitle class="mt-1" b-text="item.desc"></b-card-subtitle>
        <b-divider class="mx-4"></b-divider>
        <b-card-text class="d-flex align-center">
          <div class="d-flex align-center">
            <b-icon class="mr-1" small>{{ 'mdi-calendar-month' }}</b-icon>
            <span>{{ item.CreatedAt | dateformat('YYYY-MM-DD') }}</span>
          </div>
          <div class="mx-4 d-flex align-center">
            <b-icon class="mr-1" small>{{ 'mdi-comment' }}</b-icon>
            <span>{{ item.comment_count }}</span>
          </div>
          <div class="mx-1 d-flex align-center">
            <b-icon class="mr-1" small>{{ 'mdi-eye' }}</b-icon>
            <span>{{ item.read_count }}</span>
          </div>
        </b-card-text>
      </b-col>
    </b-card>
    <div class="text-center">
      <b-pagination
        color="indigo"
        total-visible="7"
        b-model="queryParam.pagenum"
        :length="Math.ceil(total / queryParam.pagesize)"
        @input="getArtList()"
      ></b-pagination>
    </div>
  </b-col>
</template>


<script>
export default {
  data() {
    return {
      artList: [],
      queryParam: {
        pagesize: 5,
        pagenum: 1
      },

      count: 0,
      total: 0
    }
  },
  created() {},
  mounted() {
    this.getArtList()
  },
  filters: {},
  methods: {
    // 获取文章列表
    async getArtList() {
      const { data: res } = await this.$http.get('article', {
        params: {
          pagesize: this.queryParam.pagesize,
          pagenum: this.queryParam.pagenum
        }
      })
      this.artList = res.data
      this.total = res.total
    }
  }
}
</script>
<style lang=""></style>